<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import useStore from '@/store/index';
import { http } from '@/utils/request';
const cate = useStore().category;
const obj = defineProps<{
  id: string;
}>();
const categoryList = ref();
async function hoverId(hId: string) {
  const res = await http('get', '/category', { id: hId });
  console.log(res, 'Res');
  categoryList.value = res.data.result.children;
  console.log(categoryList.value, '11');
}
hoverId(obj.id);

onUnmounted(() => {
  categoryList.value = [];
});
</script>

<template>
  <div class="topCart">
    <div class="fullSort">
      <div class="item" v-for="item in categoryList" :key="item.id">
        <router-link :to="`/Category/sub/${item.id}`"
          ><div class="pic"><img :src="item.picture" alt="" /></div>
          <div class="info">{{ item.name }}</div></router-link
        >
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.topCart {
  padding-top: 20px;
  text-align: center;
  background-color: #fff;

  .fullSort {
    padding: 0 70px;
    height: 120px;
    display: flex;
    .item {
      &:hover {
        .info {
          color: #27ba9b;
        }
      }
      width: 168px;
      .pic {
        img {
          width: 60px;
          height: 60px;
        }
      }
      .info {
        line-height: 40px;
        font-size: 16px;
        color: #333;
      }
    }
  }
}
</style>
